import React from 'react';
import {
  IonList,
  IonItem,
  IonLabel,
  IonButton,
  IonIcon,
} from '@ionic/react';
import { volumeHigh, copy } from 'ionicons/icons';
import { useTranslatorStore } from '../../store/translator';
import { textToSpeech } from '../../lib/speech';

interface TranslationResultsProps {
  fontSize: 'small' | 'medium' | 'large';
  isSpeakerOn: boolean;
}

const TranslationResults: React.FC<TranslationResultsProps> = ({
  fontSize,
  isSpeakerOn,
}) => {
  const { translations } = useTranslatorStore();

  const getFontSize = (size: string) => {
    switch (size) {
      case 'small': return 'text-sm';
      case 'large': return 'text-lg';
      default: return 'text-base';
    }
  };

  const handleSpeak = async (text: string) => {
    if (isSpeakerOn) {
      await textToSpeech(text);
    }
  };

  return (
    <IonList className="ion-padding">
      {translations.map((translation) => (
        <div key={translation.id} className="translation-item">
          <IonItem lines="none" className="source-text">
            <IonLabel className={getFontSize(fontSize)}>
              {translation.sourceText}
            </IonLabel>
            <IonButton slot="end" fill="clear" onClick={() => handleSpeak(translation.sourceText)}>
              <IonIcon icon={volumeHigh} />
            </IonButton>
          </IonItem>

          <IonItem lines="none" className="translated-text">
            <IonLabel className={getFontSize(fontSize)}>
              {translation.translatedText}
            </IonLabel>
            <IonButton slot="end" fill="clear" onClick={() => handleSpeak(translation.translatedText)}>
              <IonIcon icon={volumeHigh} />
            </IonButton>
          </IonItem>
        </div>
      ))}
    </IonList>
  );
};

export default TranslationResults;